<template>
  <el-container>
    <el-header
      class="header"
      height="30px"
    >
      <n-header :isBack="true"></n-header>
    </el-header>
    <el-main class="main">
      <n-search-bar
        :logoSize="5"
        :searchSize="12"
        :otherSize="-1"
        justify="center"
        :searchStyle="{ height: '100px', backgroundColor: '#fff' }"
        :logoStyle="{ fontSize: '100px' }"
      >
        <template #search>
          <search-bar></search-bar>
        </template>
      </n-search-bar>
      <tool-bar
        @changeOrderBy="handleChangeOrderBy"
        @changeType="handleChangeType"
        style="width: 1200px;"
      ></tool-bar>
      <item-cards
        :wordKey="this.$route.query.key"
        :orderBy="orderBy"
        :type="type"
        style="width: 1200px;"
      ></item-cards>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import NHeaderVue from "@/components/NHeader.vue";
import NSearchBarVue from "@/components/NSearchBar.vue";
import SearchBarVue from "@/components/search/SearchBar.vue";
import ToolBarVue from "@/components/search/ToolBar.vue";
import ItemCardsVue from "@/components/search/ItemCards.vue";

export default {
  components: {
    NHeader: NHeaderVue,
    NSearchBar: NSearchBarVue,
    SearchBar: SearchBarVue,
    ToolBar: ToolBarVue,
    ItemCards: ItemCardsVue,
  },
  data() {
    return {
      orderBy: 0,
      type: 0,
    };
  },
  methods: {
    handleChangeOrderBy(value) {
      this.orderBy = value;
    },
    handleChangeType(value) {
      this.type = value;
      if (this.$route.query.type != undefined) {
        this.$router.push({ query: {} });
      }
    },
  },
  created() {
    if (this.$route.query.type != undefined) {
      this.type = parseInt(this.$route.query.type);
    }
  },
};
</script>

<style scoped>
.header {
  background-color: #eae5e3;
}
.main {
  background-color: #fff;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
</style>